<%--
  Created by IntelliJ IDEA.
  User: 19654
  Date: 2019/10/17
  Time: 19:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/head.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/layui/css/layui.css">
</head>
<body>

<div class="container-fluid">
    <div class="row" style="background-color:rgb(1,81,40)" >
        <ul class="nav navbar-nav navbar-right" style="padding-right: 20px;font-size: 10px;" id="head">
            <c:if test="${!empty user}">
                <li><a href="#">欢迎&nbsp${user.username}!</a></li>
                <li><a href="<%=request.getContextPath()%>/slogin/exit">安全退出</a></li>
                <li><a href="<%=request.getContextPath()%>/personal/user">个人中心</a></li>
            </c:if>
            <c:if test="${empty user}">
                <li><a href="<%=request.getContextPath()%>/cloginview">请登录!</a></li>
            </c:if>
            <li><a href="<%=request.getContextPath()%>/reg/in">回到挂号界面</a></li>
        </ul>
    </div>
</div>

<div style="padding-left: 550px" id="face">
    <img src="<%=request.getContextPath()%>/imgs/boy.PNG" style="width:400px;height:620px; border:0px" usemap="#Map" id="manImg" />
    <!--向右宽向左宽 上边距-->
    <map name="Map">
        <!--左手臂-->
        <area shape="rect" coords="370,320,330,130" style="background-color: black"
              href="<%=request.getContextPath()%>/manMsg?uri=7" />
        <!--左手-->
        <area shape="rect" coords="360,370,330,330" style="background-color: black"
              href="<%=request.getContextPath()%>/manMsg?uri=7" />
        <!--右手-->
        <area shape="rect" coords="75,90,20,150" style="background-color: black"
              href="<%=request.getContextPath()%>/manMsg?uri=7" />
        <!--右臂-->
        <area shape="rect" coords="230,110,80,150" style="background-color: black"
              href="<%=request.getContextPath()%>/manMsg?uri=7" />
        <!--头-->
        <area shape="rect" coords="310,40,270,65" style="background-color: black"
              href="<%=request.getContextPath()%>/manMsg?uri=2" />
        <!--眼-->
        <area shape="rect" coords="310,100,270,70" style="background-color: black"
              href="<%=request.getContextPath()%>/manMsg?uri=1" />
        <!--胸-->
        <area shape="rect" coords="330,180,240,120" style="background-color: black"
              href="<%=request.getContextPath()%>/manMsg?uri=3" />
        <!--腹-->
        <area shape="rect" coords="320,275,230,200" style="background-color: black"
              href="<%=request.getContextPath()%>/manMsg?uri=4" />
        <!--咳咳-->
        <area shape="rect" coords="280,320,250,280" style="background-color: black"
              href="<%=request.getContextPath()%>/manMsg?uri=5" />
        <!--腿-->
        <area shape="rect" coords="320,540,150,320" style="background-color: black"
              href="<%=request.getContextPath()%>/manMsg?uri=7" />
        <!--脚-->
        <area shape="rect" coords="320,600,80,550" style="background-color: black"
              href="<%=request.getContextPath()%>/manMsg?uri=7" />
    </map>


    <img src="<%=request.getContextPath()%>/imgs/girl.PNG" style="width:400px;height:620px; border:0px;display: none" usemap="#Map"
         id="womanImg" />
    <img src="<%=request.getContextPath()%>/imgs/young.PNG" style="width:400px;height:620px; border:0px;display: none" usemap="#Map"
         id="youngImg" />
</div>

<div style="padding-left: 550px;display: none" id="back">
    <img src="<%=request.getContextPath()%>/imgs/boyside.PNG" style="width:400px;height:620px; border:0px" usemap="#Map" id="manImg" />
    <img src="<%=request.getContextPath()%>/imgs/girlside.PNG" style="width:400px;height:620px; border:0px;display: none" usemap="#Map"
         id="womanImg" />
    <img src="<%=request.getContextPath()%>/imgs/youngside.PNG" style="width:400px;height:620px; border:0px;display: none" usemap="#Map"
         id="youngImg" />
</div>

<div>
    <div style="width: 100%; margin-left: 450px;">
        <button class="layui-btn" style="width: 150px" onclick="man()">男性</button>
        <button class="layui-btn" style="width: 150px" onclick="woman()">女性</button>
        <button class="layui-btn" style="width: 150px" onclick="young()">儿童</button>
        <button class="layui-btn" style="width: 150px" onclick="check()">背部疾病请点击</button>
    </div>
</div>
<script src="../../plugins/layui/layui.all.js"></script>

<script>

    function man() {
        document.getElementById("face").style.display = "block";
        document.getElementById("back").style.display = "none";
        document.getElementById("manImg").style.display = "block";
        document.getElementById("womanImg").style.display = "none";
        document.getElementById("youngImg").style.display = "none";
    }

    function woman() {
        document.getElementById("face").style.display = "block";
        document.getElementById("back").style.display = "none";
        document.getElementById("manImg").style.display = "none";
        document.getElementById("womanImg").style.display = "block";
        document.getElementById("youngImg").style.display = "none";
    }

    function young() {
        document.getElementById("face").style.display = "block";
        document.getElementById("back").style.display = "none";
        document.getElementById("youngImg").style.display = "block";
        document.getElementById("womanImg").style.display = "none";
        document.getElementById("manImg").style.display = "none";
    }

    function check() {

        document.getElementById("face").style.display = "none";
        document.getElementById("back").style.display = "block";
    }
</script>

</body>
</html>
